<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍列表</title>
    <script type="text/javascript" src="lib/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="lib/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="lib/css/bootstrap.min.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
</head>
<body>
<div class="container">
    <ul id="demo">
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
        <div class="col-lg-3">
            <img lay-src="img/fswy.jpg" alt="..." class="img-rounded img-responsive" >
            <div align="center">
                <p>浮生物语</p>
                <p>一本好书</p>
                <p>剩余23本</p>
            </div>
        </div>
    </ul>

</div>

</body>
</html>
<script type="application/javascript">
    layui.use('flow', function () {
        var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        var flow = layui.flow;
        flow.lazyimg();
        flow.load({
            elem: '#demo' //指定列表容器
            , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                var lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                //模拟数据插入
                setTimeout(function(){
                    var lis = [];
                    // for(var i = 0; i < 8; i++){
                    //     lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
                    // }
                    lis.push("" +
                        "<ul id=\"demo\">\n" +
                        "    <div class=\"col-lg-3\">\n" +
                        "        <img lay-src=\"img/fswy.jpg\" alt=\"...\" class=\"img-rounded img-responsive\" >\n" +
                        "        <div align=\"center\">\n" +
                        "            <p>浮生物语</p>\n" +
                        "            <p>一本好书</p>\n" +
                        "            <p>剩余23本</p>\n" +
                        "        </div>\n" +
                        "    </div>\n" +
                        "    <div class=\"col-lg-3\">\n" +
                        "        <img lay-src=\"img/fswy.jpg\" alt=\"...\" class=\"img-rounded img-responsive\" >\n" +
                        "        <div align=\"center\">\n" +
                        "            <p>浮生物语</p>\n" +
                        "            <p>一本好书</p>\n" +
                        "            <p>剩余23本</p>\n" +
                        "        </div>\n" +
                        "    </div>\n" +
                        "    <div class=\"col-lg-3\">\n" +
                        "        <img lay-src=\"img/fswy.jpg\" alt=\"...\" class=\"img-rounded img-responsive\" >\n" +
                        "        <div align=\"center\">\n" +
                        "            <p>浮生物语</p>\n" +
                        "            <p>一本好书</p>\n" +
                        "            <p>剩余23本</p>\n" +
                        "        </div>\n" +
                        "    </div>\n" +
                        "    <div class=\"col-lg-3\">\n" +
                        "        <img lay-src=\"img/fswy.jpg\" alt=\"...\" class=\"img-rounded img-responsive\" >\n" +
                        "        <div align=\"center\">\n" +
                        "            <p>浮生物语</p>\n" +
                        "            <p>一本好书</p>\n" +
                        "            <p>剩余23本</p>\n" +
                        "        </div>\n" +
                        "    </div>\n" +
                        "</ul>")
                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < 10); //假设总页数为 10
                }, 500);
                // $.get('/api/list?page=' + page, function (res) {
                //     //假设你的列表返回在data集合中
                //     layui.each(res.data, function (index, item) {
                //         lis.push('<li>' + item.title + '</li>');
                //     });
                //
                //     //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                //     //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                //     next(lis.join(''), page < res.pages);
                // });
            }
        });
    });
</script>